import Module from "./module";
import ModuleBg from "./assets/21189.png";
import icon1 from "./assets/21172.svg";
import icon2 from "./assets/4499.svg";
import bg from "./assets/21191.svg";
import { defineComponent } from "vue";
import * as echarts from "echarts/core";
import { GridComponent, GridComponentOption } from "echarts/components";
import { LineChart, LineSeriesOption } from "echarts/charts";
import { UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
import Chart from "./components/chart";

echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition]);

type EChartsOption = echarts.ComposeOption<GridComponentOption | LineSeriesOption>;

const option: EChartsOption = {
	xAxis: {
		type: "category",
		boundaryGap: false,
		data: ["01", "04", "07", "10", "13", "16", "19", "22", "25", "28", "31"],
		axisLine: {
			show: false
		},
		axisTick: {
			show: false
		},
		axisLabel: {
			margin: 30
		}
	},
	yAxis: {
		type: "value",
		splitLine: {
			lineStyle: {
				color: "#314165",
				opacity: 0.5,
				type: "dashed",
				width: 1
			}
		}
	},
	grid: {
		left: "10%",
		right: "5%",
		top: "10%",
		bottom: "20%"
	},
	series: [
		{
			data: [820, 932, 901, 934, 1290, 932, 901, 934, 1290, 1330, 1320],
			type: "line",
			smooth: true,
			itemStyle: {
				opacity: 0
			},
			lineStyle: {
				color: "#00BCF8"
			},
			areaStyle: {
				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
					{
						offset: 0,
						color: "#00BCF8"
					},
					{
						offset: 1,
						color: "#00BCF800"
					}
				])
			}
		}
	]
};

export default defineComponent({
	name: "PowerStation",
	setup() {
		return () => (
			<Module img={ModuleBg}>
				<div className={"flex flex-col justify-center items-center w-full h-full"}>
					<div className={"h-fit w-full mb-6 relative"}>
						<img className={"w-full"} src={bg} alt={""} />
						<div
							className={
								"w-full h-full grid grid-rows-2 grid-cols-2 absolute top-0 bottom-0 left-0 right-0 justify-center content-center"
							}
						>
							<Item class={"flex flex-col justify-center items-center pr-14"} title={"正常电站"} value={"106"}></Item>
							<Item class={"flex flex-col justify-center items-center pl-14"} title={"离线电站"} value={"23"}></Item>
							<Item class={"flex flex-col justify-center items-center pr-14"} title={"告警电站"} value={"11"}></Item>
							<Item class={"flex flex-col justify-center items-center pl-14"} title={"故障电站"} value={"4"}></Item>
						</div>
						<div className={"w-fit h-fit absolute top-0 right-0 left-0 bottom-0 m-auto mb-[2.2rem]"}>
							<div class={"flex flex-col justify-center items-center"}>
								<div>已接入</div>
								<div class={"flex flex-row items-end"}>
									<div class={"text-[28px] leading-[28px] h-[28px] text-[#36CFFF]"}>144</div>

									<div class={"text-[13px] leading-[13px] h-[18px]"}>座</div>
								</div>
							</div>
							<div class={"flex flex-col justify-center items-center"}>
								<div class={"flex flex-row items-end"}>
									<div class={"text-[28px] leading-[28px] h-[28px] text-[#36CFFF]"}>906.3</div>
									<div class={"text-[13px] leading-[13px] h-[18px]"}>万kw</div>
								</div>
							</div>
						</div>
					</div>
					<div className={"w-full h-full flex flex-col justify-center items-center"}>
						<div className={"w-full h-[30px] flex flex-row items-center"}>
							<img src={icon1} className={"h-[20px] w-[20px] mr-2"} alt={""}></img>
							<div className={"h-full mr-2 whitespace-nowrap"}>本月上网电量趋势</div>
							<img src={icon2} className={"h-[2px] w-fit mr-auto"} alt={""}></img>
							<div className={"h-full w-fit whitespace-nowrap"}>单位：万Kwh</div>
						</div>
						<Chart className={"w-full h-[200px]"} option={option}></Chart>
					</div>
				</div>
			</Module>
		);
	}
});

const Item = defineComponent({
	name: "Item",
	props: {
		title: String,
		value: String
	},
	setup() {
		return (props: { title: string; value: string; unit: string }) => (
			<div class={""}>
				<div className={"flex flex-col w-fit h-fit justify-center items-center"}>
					<div className={"text-[14px]"}>{props.title}</div>
					<div className={"flex flex-row justify-start items-center"}>
						<div className={"text-[#36CFFF] text-[20px]"}>{props.value}</div>
						<div className={"h-fit text-[14px] leading-[14px] text-[#BAD9FF]"}>座</div>
					</div>
				</div>
			</div>
		);
	}
});
